<template>
	<view class="indexContainer">
		<!-- 头部区域 -->
		<view class="header">
			<image src="/static/images/logo.png" mode="" class="logo"></image>
			<view class="search">
				<text class="iconfont icon-search1"></text>
				<input type="text" value="" placeholder="搜索商品" placeholder-class="placeholder">
			</view>
			<button>我是肖肖</button>
		</view>
		<!-- 导航区域 -->
		<scroll-view scroll-x="true" class="navScroll" enable-flex="true" v-if="indexData.kingKongModule">
			<view class="navItem" :class="{active:navIndex===-1}" @click="changeNav(-1,0)">
				推荐
			</view>
			<view class="navItem" @click="changeNav(index,item.L1Id)" :class="{active:navIndex===index}" v-for="(item,index) in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				{{item.text}}
			</view>
		</scroll-view>
		<!-- 内容区 -->
		<scroll-view scroll-y="true">
			<!-- 推荐的组件 -->
			<Recommend v-if="navId==0"></Recommend>
			<Catelist v-else :navId="navId"></Catelist>
		</scroll-view>	
	
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import{mapActions,mapState} from 'vuex'
	import Recommend from '../../components/Recommend/Recommend.vue'
	import Catelist from '../../components/Catelist/Catelist.vue'
	export default {
		components:{
			Recommend,
			Catelist
		},
		data() {
			return {
				// indexData:{},
				navIndex:-1, //导航的标识
				navId:0, //导航的id
			};
		},
		mounted() {
			// 测试获取store中的数据
			// console.log(this.$store.state.home.initData)
			
			// this.getIndexData()
			this.getIndexDataAction()
		},
		methods:{
			...mapActions(['getIndexDataAction']),
			async getIndexData(){
				let result=await request('/getTndexData') //小程序
				// let result=await request('/api/getTndexData') //h5项目需要走代理，所以需要加上特殊的标识/api
				// this.indexData=result
			},
			// 点击导航的回调
			changeNav(navIndex,navId){
				this.navIndex=navIndex,
				this.navId=navId
			}
		},
		computed:{
			...mapState({
				indexData:state=>state.home.indexData
			})
		} 
	}
</script>

<style lang="stylus">
	// stylus:语法介绍：1.省略大括号  2.省略键值对的分号和冒号 3.支持样式的缩进和嵌套（其他的基本和原生的差不多）
	// .title
	// 	color red
	.indexContainer
		.header
			display flex
			padding 10rpx 0
		.logo
			width 140rpx
			height 40rpx
			margin 10rpx 20rpx
		.search
			position relative
			width 420rpx
			height 60rpx
			background #eee
			.iconfont
				position absolute
				font-size 30rpx
				top 15rpx
				left 10rpx
			input
				width 370rpx
				margin-left 50rpx
				height 60rpx
				.placeholder
					font-size 26rpx				
		button
			width 144rpx
			height 60rpx
			text-align center
			line-height 60rpx
			font-size 24rpx
			padding 0 4rpx
			margin 0 10rpx
		.navScroll
			height 80rpx 
			display flex
			white-space nowrap
			.navItem
				display inline-block
				width 140rpx
				height 80rpx
				text-align center
				line-height 80rpx
				box-sizing border-box
				font-size 26rpx
				padding 0 20rpx
			.navItem.active
				border-bottom 1rpx solid #BB2C08
</style>
